﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户中心</title>
	<link rel="stylesheet" href="/css/bootstrap.min.css">
	<script src="/js/jquery.validation/jquery-validation-1.14.0/lib/jquery.js"></script>
	<script src="/js/jquery.validation/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<script src="/js/jquery.validation/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
	<!-- ftl页面必须加“/” 否则找不到路径-->
	<style>
		input.error{
			border: 1px solid #E6594E;
		}
	</style>
	<style>
.error{
	color:red;
}
</style>

</head>
<body>
    <div class="container">
		<form id="editUserForm">
		  <br/>
		  <div class="form-group">
			<label for="userName">用户名：</label>
			<input type="text" class="form-control" id="userName" name="userName" value="${data.userName}" placeholder="输入用户名">
		  </div>
		  <div class="form-group">
			<label for="pwdword">用户密码：</label>
			<input type="text" class="form-control" id="pwdword" name="pwdword" value="${data.pwdword}" placeholder="输入用户密码">
		  </div>
		  <div class="form-group">
			<label for="sex">用户性别：</label>
			<input type="text" class="form-control" id="sex" name="sex" value="${data.sex}" placeholder="输入性别">
		  </div>
		  <div class="form-group">
			<label for="telephone">联系方式：</label>
			<input type="text" class="form-control" id="telephone"  value="${data.telephone}" name="telephone" placeholder="输入联系方式">
		  </div>
		  <div class="form-group">
		  <button type="button" id="saveBtn" class="btn btn-success">提交</button>
		  <button type="button" id="cancelBtn" class="btn btn-default">取消</button>
		  </div>
		</form>
    </div>

		<script>
			var editUser = function(){
				if(!validform().form()){ 
					return;  
				}
				$.ajax({
					   type: "GET",
					   dataType: "json",
					   url: "/user/edit",//用的是异步提交编辑的页面而不是表单提交页面
					   data: {//页面传值
					   		"userId":${data.userId},//data 控制层请求值
							"userName": $("#userName").val(),
							"pwdword":$("#pwdword").val(),
							"sex": $("#sex").val(),
							"telephone": $("#telephone").val()
							
					   },
					   success: function(msg){
							$('#cancelBtn').click();	//当添加成功，不再添加用户后，点击取消按钮，关闭弹出层		
					   }
				});
			}
			
			$('#saveBtn').on('click', function(){
				editUser();//调用添加函数,可以多次添加，知道点击取消按钮，结束添加用户
			});
			
			$('#cancelBtn').on('click', function(){//关闭弹出层后并显示刷新列表
				var index = parent.layer.getFrameIndex(window.name);
				parent.getUserList();
				parent.layer.close(index);
			});

			//表单提交验证，校验表单
			
			var validform = function() {
			return $("#editUserForm").validate({
				rules : {
					userName : {
						required : true,
						minlength : 2
					},
					pwdword : {
						required : true,
						minlength : 5
					},
					sex : {
						required : true,
						maxlength : 1,
						minlength : 1
					},
					telephone : {
						required : true,
						maxlength : 11,
						minlength : 11,
						digits : true
					}

				},
				messages : {
					userName : {
						required : "请输入用户名",
						minlength : "用户名至少由两个字母组成"
					},
					pwdword : {
						required : "请输入密码",
						minlength : "密码长度不能小于 5 个字母"
					},
					sex : {
						required : "请输入您的性别",
						maxlength : "只能是男或女",
						minlength : "只能是男或女"
					},
					telephone : {
						required : "请输入手机号",
						maxlength : "手机号码只有11位",
						minlength : "手机号码只有11位",
						digits : "只能输入数字"
					}
				}
			});

		}
		// 在键盘按下并释放及提交后验证提交表单，不是全部填写完成点提交才显示提示信息的
		$().ready(function() {

			validform();
		});
	</script>
</body>
</html>